<template>
  <div style="padding-top: 24px;">
    <router-link style="margin-left: 24px;" :to="{path:'/survey/index'}">
      <a-button>考勤组设置</a-button>
    </router-link>
    <router-link :to="{path:'/survey/setting?groupId=1'}">
      <a-button>添加考勤组</a-button>
    </router-link>
    <router-link :to="{path:'/survey/attstatistics'}">
      <a-button>考勤统计管理</a-button>
    </router-link>
    <router-link :to="{path:'/survey/record'}">
      <a-button>打卡记录</a-button>
    </router-link>
    <router-link :to="{path:'/survey/details'}">
      <a-button>列表点击详情</a-button>
    </router-link>
    <div class="flow">
      <a-steps :current="current" size="small">
        <a-step title="基本信息" />
        <a-step title="考勤班次" />
        <a-step title="考勤方式" />
        <a-step title="考勤规则" />
      </a-steps>
    </div>
    <div style="height: 24px;width: 100%;background-color: #F2F4FA;margin-bottom: 24px;"></div>

    <template v-if="current == 0">
      <a-modal width="1000px" :title="puncherMemberModal ? '选择考勤对象' : '选择负责人'" :visible="puncherMemberModal || ownerMemberModal" ok-text="保存" cancel-text="取消" @ok="getPunchersTxt()"
        @cancel="closeMemberModal()">
        <div style="display: flex;">
          <!-- 714晚上极限拯救队友代码 -->
          <!-- {{ puncherArr }} -->
          <!-- {{ treeSelect }} -->
          <div class="btn-left checked-area" style="width: 50%; border-right: 1px solid #F2F4FA;padding: 24px;">
            <div v-if="puncherMemberModal">
              <div class="btn-tit">部门</div>
              <div class="tag-btn" style="display: flex;margin: 10px 0 20px 0;flex-wrap: wrap;">
                <div
                  class="item"
                  v-for="(item,index) in getDepartmentList" :key="item.id">
                  <span class="label">{{ item.nickName }} ( {{ item.personCount }} )</span>
                </div>
                <div v-if="!getDepartmentList.length" style="color:#999999">暂无部门</div>
              </div>
              <div class="btn-tit">人员</div>
              <div class="tag-btn" style="display: flex;margin-top: 10px;flex-wrap: wrap;">
                <div
                  class="item"
                  v-for="item in selectedTeacherList"
                  :key="item.userId"
                >
                  <span class="label">{{ item.userName }}</span>
                  <a-icon
                    class="icon"
                    type="close"
                    @click="delCheckedEvt(item.userId, 'T', item.departmentId)"
                  />
                </div>
                <div v-if="!selectedTeacherList.length" style="color:#999999">暂无部门</div>
              </div>
            </div>
            <div v-else>
              <div class="btn-tit">人员</div>
              <div
                class="item"
                v-for="item in selectedTeacher2List"
                :key="item.userId"
              >
                <span class="label">{{ item.userName }}</span>
                <a-icon
                  class="icon"
                  type="close"
                  @click="delCheckedEvt2(item.userId, 'T', item.departmentId)"
                />
              </div>
              <div v-if="!selectedTeacher2List.length" style="color:#999999">暂无部门</div>
        <!--      <div class="tag-btn" style="display: flex;margin-top: 10px;flex-wrap: wrap;">
                <div v-for="(item,index) in checkedOwner" :key="item.id">
                  <a-tag closable @close="checkedOwner.splice(index , 1)"  style="margin-bottom: 10px;">{{ JSON.parse(item).userName }}</a-tag>
                </div>
                <div v-if="checkedOwner.length" class="clear" style="color: #4174FD;cursor: pointer;" @click="checkedOwner = []">清空</div>
                <div v-else style="color:#999999">暂无人员</div>
              </div> -->
            </div>
          </div>
          <div style="padding: 24px;">
            <div v-if="puncherMemberModal">
              <a-tabs default-active-key="2">
                <a-tab-pane key="1">
                  <span slot="tab">部门</span>
                  <!-- {{treeSelect}} -->
                  <a-tree
                    checkable
                    v-model="treeSelect"
                    :tree-data="departemntList"
                    @check="departmentSelect"
                    :replaceFields = "{
                      children:'child',
                      title:'name',
                      key:'id'
                    }"
                  />
                </a-tab-pane>
                <a-tab-pane key="2">
                  <span slot="tab">人员</span>
                  <!-- <a-tree checkable v-model="checkedPuncher" :tree-data="allTeacherList" /> -->
                  <!-- {{ checkedTeacherList }} -->
                  <a-tree
                    v-model="checkedTeacherList"
                    :defaultCheckedKeys = [teacherList[0].key]
                    :tree-data="teacherList"
                    checkable
                    @check="onTeacherChange"
                  ></a-tree>
                </a-tab-pane>
              </a-tabs>
            </div>
            <div v-else>
              <!-- {{ checkedTeacher2List }} -->
              <a-tree
                v-model="checkedTeacher2List"
                :tree-data="teacherList"
                checkable
                @check="onTeacher2Change"
              ></a-tree>
              <!-- <a-tree checkable v-model="checkedOwner" :tree-data="allTeacherList" /> -->
            </div>
          </div>
        </div>
      </a-modal>

      <div class="flow-form">
        <a-form :form="form" @submit="handleSubmit">
          <a-row type="flex" justify="center" class="flow-form-all">
            <div class="flow-form-tit"><span style="color: #f5222d;">*</span>考勤组名称：</div>
            <a-col :span="8">
              <a-input v-model="punchGroupInfo.groupName" placeholder="请输入考勤组名称"
                v-decorator="['punchGroupInfo.groupName', { rules: [{ required: true, message: '请输入考勤组名称' }] }]" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row type="flex" justify="center" class="flow-form-all">
            <div class="flow-form-tit"><span style="color: #f5222d;">*</span>考勤对象：</div>
            <a-col :span="8">
              <div @click="showMemberModal(1)" class="flow-form-desc">
                <div style="color: #c0bfbf;" v-if="!PunchersTxt">请选择</div>
                 <div class="ellipsis" v-else>{{ PunchersTxt }}</div>
                 <a-icon type="down" />
          <!--     <div style="color: #c0bfbf;" v-if="!getPunchers">请选择</div>
                <div class="ellipsis" v-else>{{ getPunchers }}</div>
                <div class="ellipsis" v-else>{{ selectedTeacherList }}{{ getDepartmentList }}</div>
                <a-icon type="down" /> -->
              </div>
            </a-col>
          </a-row>
          <a-row type="flex" justify="center" class="flow-form-all">
            <div class="flow-form-tit"><span style="color: #f5222d;">*</span>考勤负责人：</div>
            <a-col :span="8">
              <div @click="showMemberModal(2)" class="flow-form-desc">
                <div style="color: #c0bfbf;" v-if="!OwnerTxt">请选择</div>
                 <div class="ellipsis" v-else>{{ OwnerTxt }}</div>
                 <a-icon type="down" />
            <!--
                <div style="color: #c0bfbf;" v-if="!getOwners">请选择</div>
                <div class="ellipsis" v-else>{{ getOwners }}</div>
                <a-icon type="down" />
                -->
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </template>

    <template v-if="current == 1">
      <div class="flow-form">
        <a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 8 }" @submit="handleSubmit">
          <a-form-item :wrapper-col="{ offset: 8 }">
            <div style="display: flex;">
              <div><span style="color: #E40922;">*</span>考勤设置：</div>
              <div style="text-align: left;">
                <a-radio-group v-model="shiftRes.groupArrange" @change="shiftResChange">
                  <div style="display: flex;align-items: center;">
                    <a-radio :value="0">按照法定节假日排休</a-radio>
                    <div style="color: #4174FD;cursor: pointer;" @click="seeCalendar">查看排休日历</div>
                    <a-modal v-model="calendar" width="1000px" title="排休日历">
                    </a-modal>
                  </div>
                  <div style="display: flex;align-items: center;">
                    <a-radio :value="1">按照校历排休</a-radio>
                    <div style="color: #4174FD;cursor: pointer;" @click="schoolCalendar = true">查看校历排休</div>
                    <a-modal v-model="schoolCalendar" width="1000px" title="排休日历">
                      <a-table :columns="schoolCalendarColumns" bordered></a-table>
                      </a-table>
                    </a-modal>
                  </div>
                </a-radio-group>
              </div>
            </div>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 16, offset: 8 }">
            <div style="display: flex;">
              <div id=""><span style="color: #E40922;">*</span>工作日设置：</div>
              <div style="text-align: left;">
                <div style="display: flex;align-items: center;">
                  <div>统一设置班次（选择考勤日后设置）</div>
                  <div style="color: #4174FD;cursor: pointer;" @click="onekeySetting">一键设置班次</div>
                </div>
                <a-table :columns="columns" :data-source="shiftData" :row-selection="{ selectedRowKeys: selectedshiftKeys, onChange: onshiftChange }">
                <!-- <a-table :columns="columns" :data-source="shiftData"> -->
                  <template slot="shiftDayStr" slot-scope="text,record">
                    <div slot="shiftDayStr" href="javascript:;">{{ record.shiftDayStr }}</div>
                  </template>
                  <template slot="action" slot-scope="text,record">
                    <a slot="action" href="javascript:;" @click="updateShiftDataById(record)">更改班次</a>
                  </template>
                </a-table>
              </div>
            </div>
          </a-form-item>
        </a-form>
      </div>

      <a-modal v-model="addModal" width="1000px" :title="componentsName" ok-text="保存" centered cancel-text="取消"
        @ok="handleaddModalOk" @cancel="addModal = false">
        <punchEditModule v-if="addModal" ref="punchEditModule" :editData="editData" :componentsName="componentsName" />
      </a-modal>

      <a-modal title="更改班次" width="760px" :visible="visibleTwo" :confirm-loading="confirmLoading" ok-text="保存"
        cancel-text="取消" @ok="updateShiftData" @cancel="visibleTwo = false">
        <a-button @click="addClasses" type="primary">
          <a-icon type="plus" />添加班次
        </a-button>
        <a-table style="margin-top: 20px;" :row-selection="{ onSelect: onRadioShiftSelect, type: 'radio',  }" :columns="attshiftColumns" :data-source="attshiftData">
          <template slot="action" slot-scope="text,record">
            <!-- 普通班次 -->
            <div v-if="record.defaultType == 0">
              <a slot="action" href="javascript:;" @click="showModal(record)" style="margin-right: 10px;">编辑</a>
              <a slot="action" href="javascript:;" @click="confirm(record.id)">删除</a>
            </div>
            <!-- 系统默认班次 -->
            <div v-if="record.defaultType == 1">
              <a slot="action" href="javascript:;" @click="showModal(record)" style="margin-right: 10px;">编辑</a>
              <a slot="action" href="javascript:;" style="color: silver;">删除</a>
            </div>
            <!-- 系统休息班次 -->
            <div v-if="record.defaultType == 2">
              <a slot="action" href="javascript:;" style="margin-right: 10px;color: silver;">编辑</a>
              <a slot="action" href="javascript:;" style="color: silver;">删除</a>
            </div>
          </template>
        </a-table>
      </a-modal>
    </template>

    <template v-if="current == 2">
      <div class="form-type">
        <div class="work-type">
          <div class="work-type-tit"><span style="color: #E40922;">*</span>考勤类型：</div>
          <a-radio-group @change="typeChange">
            <div class="work-type-gps">
              <a-radio value="0">GPS打卡</a-radio>
              <div class="work-type-locale" @click="addAddress">添加办公地点</div>
            </div>
            <a-table style="margin: 20px 0;width: 650px;" :row-selection="{ onSelect: onRadioAddressSelect, type: 'radio' }" :columns="typeColumns" :data-source="typeData.gpsPlaceParams">
              <template slot="action" slot-scope="text,record">
                <a slot="action" href="javascript:;" @click="editAddress(record)">修改</a>
                <a slot="action" style="color: #999999;">｜</a>
                <a slot="action" href="javascript:;" @click="addressRemove(record.id)">删除</a>
              </template>
            </a-table>
            <a-radio value="1">考勤机打卡</a-radio>
          </a-radio-group>
        </div>

        <a-modal title="添加办公地点" width="1200px" :visible="showGPS" ok-text="保存" cancel-text="取消" @ok="saveOrUpdateAddress" @cancel="showGPS = false">
          <div class="gps-input">
            <div class="gps-tit">考勤地点：</div>
            <a-auto-complete :data-source="poisList" placeholder="请输入" style="width: 220px" @change="mapSearch" @select="mapSelect">
              <a-input>
                <a-button
                  slot="suffix"
                  style="margin-right: -12px"
                  class="search-btn"
                  type="primary"
                >
                  <a-icon type="search" />
                </a-button>
              </a-input>
            </a-auto-complete>
            <div class="gps-tit">有效范围：</div>
            <a-select
              v-model="attgroupgpsplaceParams.validRange"
              default-value="100 米"
              style="width: 170px"
            >
              <a-select-option value="100">
                100 米
              </a-select-option>
              <a-select-option value="200">
                200 米
              </a-select-option>
              <a-select-option value="300">
                300 米
              </a-select-option>
              <a-select-option value="400">
                400 米
              </a-select-option>
              <a-select-option value="500">
                500 米
              </a-select-option>
              <a-select-option value="600">
                600 米
              </a-select-option>
              <a-select-option value="700">
                700 米
              </a-select-option>
              <a-select-option value="800">
                800 米
              </a-select-option>
              <a-select-option value="900">
                900 米
              </a-select-option>
              <a-select-option value="1000">
                1000 米
              </a-select-option>
              <a-select-option value="1500">
                1500 米
              </a-select-option>
              <a-select-option value="2000">
                2000 米
              </a-select-option>
              <a-select-option value="2500">
                2500 米
              </a-select-option>
              <a-select-option value="3000">
                3000 米
              </a-select-option>
            </a-select>
            <div class="gps-tit" style="margin-left: 20px;">考勤地点名称：</div>
            <a-input v-model="attgroupgpsplaceParams.placeName" placeholder="该名称会在打卡手机端显示，方便员工识别打" enter-button
              style="width: 200px" />
          </div>
          <map-container ref="mapContainer"></map-container>
        </a-modal>
      </div>
    </template>

    <template v-if="current == 3">
      <a-form-item :wrapper-col="{ span: 8, offset: 8 }">
        <div v-for="(item,index) in ruleList" :key="index" style="width: 600px;">
          <div class="flow-rule">
            <div class="rule-tit" style="padding-right: 18px;">{{ item.tit }}:</div>
              <a-switch v-if="index == 0" class="rule-switch" v-model="ruleData.photoPunch"
                :defaultChecked="ruleData.photoPunch==0? false:true" />
              <a-switch v-if="index == 1" class="rule-switch" v-model="ruleData.facePunch"
                :defaultChecked="ruleData.facePunch==0? false:true" />
              <a-switch v-if="index == 2" class="rule-switch" v-model="ruleData.outPunch"
                :defaultChecked="ruleData.outPunch==0? false:true" />
              <a-switch v-if="index == 3" class="rule-switch" v-model="ruleData.supplementPunch"
                :defaultChecked="ruleData.supplementPunch==0? false:true" />
              <a-switch v-if="index == 4" class="rule-switch" v-model="ruleData.ralteDuty"
                :defaultChecked="ruleData.ralteDuty==0? false:true" />
              <a-switch v-if="index == 5" class="rule-switch" v-model="ruleData.updateOutPunch"
                :defaultChecked="ruleData.updateOutPunch==0? false:true" />
              <div class="rule-desc">{{ item.desc }}</div>
              <div v-if="index == 4 && ruleData.ralteDuty" class="rule-desc" style="color: #4174FD;cursor: pointer;"
                @click="keyForm">关联值班表</div>
              <a-modal v-model="keyDialog" width="1000px" title="关联值班表">
                <div class="rule-form">
                  <div class="rule-form-tit"><span style="color: #E40922;">*</span>考勤打卡设置：</div>
                </div>
              </a-modal>
          </div>
          <div v-if="index==1 && ruleData.facePunch" class="flow-rule">
            <div class="rule-tit"></div>
            <div style="width: 54px;"></div>
            <a-checkbox v-model="ruleData.faceFail" :defaultChecked="ruleData.faceFail==0? false:true">
              人脸识别失败时，允许使用普通的打卡拍照</a-checkbox>
          </div>
          <div v-if="index==2 && ruleData.outPunch" class="flow-rule">
            <div class="rule-tit"></div>
            <div style="width: 54px;"></div>
            <a-checkbox v-model="ruleData.outPhoto" :defaultChecked="ruleData.outPhoto==0? false:true">外勤打卡需拍照
            </a-checkbox>
          </div>
          <div v-if="index==3 && ruleData.supplementPunch">
            <div class="flow-rule">
              <div class="rule-tit"></div>
              <div style="width: 54px;"></div>
              <div>补卡审批：</div>
              <a-radio-group v-model="ruleData.supplementApproval">
                <a-radio :value="1">审批</a-radio>
                <a-radio :value="0">不审批</a-radio>
              </a-radio-group>
            </div>
            <div class="flow-rule">
              <div class="rule-tit"></div>
              <div style="width: 54px;"></div>
              <div style="text-indent:5em;color:#4174FD">补卡流程设置</div>
            </div>
            <div class="flow-rule">
              <div class="rule-tit"></div>
              <div style="width: 54px;"></div>
              <div>补卡类型：</div>
              <a-checkbox v-model="ruleData.supplementMiss" :defaultChecked="ruleData.supplementMiss==0? false:true">缺卡
              </a-checkbox>
              <a-checkbox v-model="ruleData.supplementLate" :defaultChecked="ruleData.supplementLate==0? false:true">迟到
              </a-checkbox>
              <a-checkbox v-model="ruleData.supplementLeaveEarly"
                :defaultChecked="ruleData.supplementLeaveEarly==0? false:true">早退</a-checkbox>
            </div>
            <div class="flow-rule">
              <div class="rule-tit"></div>
              <div style="width: 54px;"></div>
              <div>补卡周期：</div>
              <a-radio-group v-model="ruleData.supplementCycle">
                <a-radio :value="1">每月</a-radio>
                <a-radio :value="0">每周</a-radio>
              </a-radio-group>
            </div>
            <div class="flow-rule">
              <div class="rule-tit"></div>
              <div style="width: 54px;"></div>
              <div>补卡次数：</div>
              <div>每人每周期内补卡上限</div>
              <a-input-number v-model="ruleData.supplementTimes" class="rule-input"></a-input-number>
              <div>次</div>
            </div>
            <div class="flow-rule">
              <div class="rule-tit"></div>
              <div style="width: 54px;"></div>
              <div>补卡时限：</div>
              <div>可申请过去</div>
              <a-select default-value="0" style="width: 120px;margin: 0 -5px 0 5px;" @change="handleChange">
                <a-select-option value="0">
                  自然日
                </a-select-option>
                <a-select-option value="1">
                  工作日
                </a-select-option>
              </a-select>
              <a-input-number v-model="ruleData.supplementTimeLimit" class="rule-input"></a-input-number>
              <div>天的补卡</div>
            </div>
          </div>
        </div>
      </a-form-item>
    </template>

    <a-form-item class="flow-form" :wrapper-col="{ span: 12, offset: 10 }">
      <a-button html-type="submit" class="form-btn">
        <router-link :to="{path:'/survey/index'}">返回</router-link>
      </a-button>
      <a-button html-type="submit" class="form-btn" @click="currentBtn()">
        保存
      </a-button>
      <a-button v-if="current>0" html-type="submit" class="form-btn" @click="currentBtn(1)">
        上一步
      </a-button>
      <a-button v-if="current == 3" type="primary" html-type="submit" class="form-btn" @click="currentBtn(2)">
        完成
      </a-button>
      <a-button v-else type="primary" html-type="submit" class="form-btn" @click="currentBtn(2)">
        下一步
      </a-button>
    </a-form-item>
  </div>
</template>
<script>


  const columns = [{
      title: '考勤日',
      dataIndex: 'day',
      width: 100,
    },
    {
      title: '考勤规则',
      dataIndex: 'shiftDayStr',
      width: 200,
      scopedSlots: {
        customRender: 'shiftDayStr'
      },
    },
    {
      title: '操作',
      dataIndex: 'address',
      scopedSlots: {
        customRender: 'action'
      },
      width: 100,
    },
  ];
  const shiftColumns = [{
      title: '班次',
      dataIndex: 'shiftName',
      width: 100,
    },
    {
      title: '有效范围',
      dataIndex: 'validRange',
      width: 200,
    },
    {
      title: '操作',
      dataIndex: 'address',
      scopedSlots: {
        customRender: 'action'
      },
      width: 100,
    },
  ];
  const typeColumns = [{
      title: '考勤地点',
      dataIndex: 'placeAddr',
      width: 100,
    },
    {
      title: '有效范围',
      dataIndex: 'validRange',
      width: 200,
    },
    {
      title: '操作',
      dataIndex: 'address',
      scopedSlots: {
        customRender: 'action'
      },
      width: 100,
    },
  ];
  const schoolCalendarColumns = [{
      title: '月份',
      dataIndex: 'address',
      width: 80,
      align: 'center',
      customRender: (value, row, index) => {
        const obj = {
          children: value,
          attrs: {},
        };
        if (index === 2) {
          obj.attrs.rowSpan = 2;
        }
        // These two are merged into above cell
        if (index === 3) {
          obj.attrs.rowSpan = 0;
        }
        if (index === 4) {
          obj.attrs.colSpan = 0;
        }
        return obj;
      },
    },
    {
      title: '周次',
      dataIndex: 'address',
      width: 80,
      align: 'center'
    },
    {
      title: '单双周',
      dataIndex: 'address',
      width: 80,
      align: 'center'
    },
    {
      title: '星期',
      dataIndex: 'address',
      align: 'center',
      children: [{
          title: '周一',
          dataIndex: 'age',
          width: 72,
          align: 'center'
        },
        {
          title: '周二',
          dataIndex: 'age',
          width: 72,
          align: 'center'
        },
        {
          title: '周三',
          dataIndex: 'age',
          width: 72,
          align: 'center'
        },
        {
          title: '周四',
          dataIndex: 'age',
          width: 72,
          align: 'center'
        },
        {
          title: '周五',
          dataIndex: 'age',
          width: 72,
          align: 'center'
        },
        {
          title: '周六',
          dataIndex: 'age',
          width: 72,
          align: 'center'
        },
        {
          title: '周日',
          dataIndex: 'age',
          width: 72,
          align: 'center'
        },
      ]
    },
    {
      title: '日程',
      dataIndex: 'address',
      align: 'center'
    },
  ];
  const attshiftColumns = [{
      title: '班次',
      dataIndex: 'shiftName',
      width: 100,
    },
    {
      title: '考勤时间',
      dataIndex: 'workTimeStr',
      width: 200,
    },
    {
      title: '类型',
      dataIndex: 'defaultType',
      width: 200,
      customRender: (value, row, index) => {
        if (row.shiftDefault == 1) {
          return '默认班次'
        }
        if (value == 0) {
          return '普通班次'
        }
        if (value == 1) {
          return '系统默认班次'
        }
        if (value == 2) {
          return '系统休息班次'
        }
      },
    },
    {
      title: '操作',
      dataIndex: 'address',
      scopedSlots: {
        customRender: 'action'
      },
      width: 100,
    },
  ];

  import moment from 'moment';
  import {
    list,
    getBase,
    save,
    shift,
    shiftSave,
    type,
    typeSave,
    rule,
    ruleSave,
    attshiftSave,
    oaattendancegroupmember,
    attgroupgpsplaceSave,
    attgroupgpsplaceRemove,
    attgroupgpsplaceEdit,
    attshiftList,
    attshiftEdit,
    getGPS,
    membercheck,
    attshiftRemove,
  } from '@/api/clock'
  import {
    tree,
    allTeacherAndTree,
    allTeacherAndTreeP,
    calendarInfo,
    teacherList,
  } from '@/api/tree'
  import MapContainer from "@/components/mapContainer/MapContainer.vue";
  import addMember from "@/components/addMember/addMember.vue";
  import punchEditModule from '@/components/punchEditModule/punchEditModule.vue'

  export default {
    components: {
      MapContainer,
      punchEditModule,
      addMember
    },
    data() {
      return {
        teacherList: [],
        checkedTeacherList: [],
        selectedTeacherList: [],

        teacher2List: [],
        checkedTeacher2List: [],
        selectedTeacher2List: [],

        PunchersTxt: '',
        OwnerTxt: '',

        groupId: null,
        punchGroupInfo: {
          deptParams: [],
          groupName: undefined,
          id: undefined, // 考勤组id
          leaderParams: [],
          memberParams: []
        },
        allTeacherList: [],
        // 选中项目
        checkedPuncher: [],
        checkedOwner: [],
        checkedDepartment: [],

        selectDepartment: [],

        // 打卡者 ｜ 负责人
        puncherArr: [],
        ownerArr: [],
        departmentArr: [],

        puncherMemberModal: false,
        ownerMemberModal: false,
        // 统一缓存各种行点击数据
        commonRecordData: null,

        // 更改班次弹窗选中的班次
        radioShiftRowData: {},
        // 考勤班次
        attshiftData: [],         //一键设置班次列表
        shiftRes: {
          id: 0,
          shiftDay1: 0,
          shiftDay1Str: undefined,
          shiftDay2: 0,
          shiftDay2Str: undefined,
          shiftDay3: 0,
          shiftDay3Str: undefined,
          shiftDay4: 0,
          shiftDay4Str: undefined,
          shiftDay5: 0,
          shiftDay5Str: undefined,
          shiftDay6: 0,
          shiftDay6Str: undefined,
          shiftDay7: 0,
          shiftDay7Str: undefined
        },
        attshiftParams: {
          shiftName: undefined, //班次名称
          id: this.dataId,
          shiftFrequency: 1, //上班班次数，1：一次上下班，2：2次上下班，必填，大于0
          shiftDefault: 0, //是否默认班次，0：否，1：默认班次，必填，默认0
          restEnd: undefined, //休息结束时间，一次上下班时必填，格式：HH:mm:ss
          restStart: undefined, //休息开始时间，一次上下班时必填，格式：HH:mm:ss
          shiftDetailParams: [],
        }, //添加班次

        selectedRowKeys: [], // Check here to configure the default column


        poiTempArr: [],

        columns,
        shiftColumns,
        typeColumns,
        schoolCalendarColumns,
        attshiftColumns,
        workOneParams: {
          detailIndex: 1, //
          workStart: undefined, //上班开始时间，必填，格式：HH:mm:ss
          workEnd: undefined, //上班结束时间（下班时间），必填，格式：HH:mm:ss
          workEndAbsenteeism: 0, //早走超过X分钟记录为旷工，必填，默认30
          workEndLeaveEarly: 0, //早走超过X分钟记为早退，必填，默认0
          workStartAbsenteeism: 0, //晚到超过X分钟记录为旷工，必填，默认30
          workStartLate: 0, //晚到超过X分钟记录为迟到，必填，默认0
          workStartPunch: 0, //最早可提前X分钟进行打卡，必填，默认60
        },
        workTwoParams: {
          detailIndex: 2, //
          workStart: undefined, //上班开始时间，必填，格式：HH:mm:ss
          workEnd: undefined, //上班结束时间（下班时间），必填，格式：HH:mm:ss
          workEndAbsenteeism: 0, //早走超过X分钟记录为旷工，必填，默认30
          workEndLeaveEarly: 0, //早走超过X分钟记为早退，必填，默认0
          workStartAbsenteeism: 0, //晚到超过X分钟记录为旷工，必填，默认30
          workStartLate: 0, //晚到超过X分钟记录为迟到，必填，默认0
          workStartPunch: 0, //最早可提前X分钟进行打卡，必填，默认60
        },
        workThrParams: {
          detailIndex: 3, //
          workStart: undefined, //上班开始时间，必填，格式：HH:mm:ss
          workEnd: undefined, //上班结束时间（下班时间），必填，格式：HH:mm:ss
          workEndAbsenteeism: 0, //早走超过X分钟记录为旷工，必填，默认30
          workEndLeaveEarly: 0, //早走超过X分钟记为早退，必填，默认0
          workStartAbsenteeism: 0, //晚到超过X分钟记录为旷工，必填，默认30
          workStartLate: 0, //晚到超过X分钟记录为迟到，必填，默认0
          workStartPunch: 0, //最早可提前X分钟进行打卡，必填，默认60
        },

        // step 3
        radioAddressRowData: {},

        // selectedshiftKeys: [0, 1, 2, 3, 4],
        selectedshiftKeys: [],
        loading: false,
        memberVisible: false,
        addModal: false,
        addNum: 1,
        addList: 1,
        calendar: false,
        current: 0,
        flow: ['基本信息', '考勤班次', '考勤方式', '考勤规则'],
        formLayout: 'horizontal',
        form: this.$form.createForm(this, {
          name: 'coordinated'
        }),

        confirmLoading: false,

        expandedKeys: ['0-0-0', '0-0-1'],
        autoExpandParent: true,

        selectedKeys: [],
        ruleList: [{
            tit: '拍照打卡',
            desc: '开启后打卡时需拍照，照片会存档'
          },
          {
            tit: '人脸识别打卡',
            desc: '开启后员工打卡打卡时自动验证人脸，照片不存档'
          },
          {
            tit: '外勤打卡',
            desc: '开启后允许员工在考勤范围外打卡'
          },
          {
            tit: '允许补卡',
            desc: '开启后允许员工补卡'
          },
          {
            tit: '考勤关联值班',
            desc: '开启后需关联值班表'
          },
          {
            tit: '允许更新下班打卡',
            desc: ''
          },
        ],
        keyDialog: false,

        memberList: [],
        leaderList: [],
        shiftData: [],
        timeData: [],

        typeData: {},
        showGps: true,
        ruleData: {},
        visibleTwo: false,
        treeList: [],
        treeSelect: [],
        allSelect: [],
        charge: false,
        allSelectTwo: [],
        dataId: null,
        attgroupgpsplaceParams: {
          groupId: null,
          id: null,
          placeAddr: null,
          placeLatitude: null,
          placeLongitude: null,
          placeName: null,
          validRange: 100
        },
        showGPS: false,
        schoolCalendar: false, //校历排休

        poisList: [],
        state: '',
        workHours: undefined,
        workMinute: undefined,

        poiList: [],

        editData: {},

        componentsName: undefined,

      }
    },
    watch: {
      selectedTeacherList: {
        handler(list) {
          this.$emit("teacherChange", list);
        },
        deep: true,
      },
      selectedStudentList: {
        handler(list) {
          this.$emit("studentChange", list);
        },
        deep: true,
      },
      selectedRoleList: {
        handler(list) {
          this.$emit("roleChange", list);
        },
        deep: true,
      },
      selectedTeacher2List: {
        handler(list) {
          this.$emit("teacherChange", list);
        },
        deep: true,
      },
      selectedStudent2List: {
        handler(list) {
          this.$emit("studentChange", list);
        },
        deep: true,
      },
      selectedRole2List: {
        handler(list) {
          this.$emit("roleChange", list);
        },
        deep: true,
      },

      // 动态设置地图和范围
      attgroupgpsplaceParams: {
        handler() {
          console.log("this.attgroupgpsplaceParams: ", this.attgroupgpsplaceParams);
          if (this.attgroupgpsplaceParams.placeLatitude && this.attgroupgpsplaceParams.placeLongitude) {
            this.$refs.mapContainer.initMap(this.attgroupgpsplaceParams)
          }
        },
        deep: true
      }
    },
    computed: {
      getDepartmentList () {
        const readNodes = (nodes = [], arr = []) => {
          for (let item of nodes) {
            // if (this.treeSelect.includes(item.id) && !item.child?.length) {
            if (this.treeSelect.includes(item.id)) {
              arr.push(item)
            }
            if (item.child?.length) readNodes(item.child, arr)
          }
          return arr
        }
        return readNodes(this.departemntList)
      },
      getOwners () {
        let tempArr = []
        this.checkedOwner.forEach(item => {
          tempArr.push(JSON.parse(item).userName)
        })
        return tempArr.join(',')
      },
      getDepartments () {

      },
    },
    created() {
      // this.current = 2
      // this.$route.query.groupId = '1551135058271133697'



      this.getModinMemberList();
      if (this.$route.query.groupId) {
        this.groupId = this.punchGroupInfo.id = this.$route.query.groupId
        this.getBaseInfo()
      }
      this.getMemberTreeData()
    },
    methods: {

      getPunchersTxt () {
        console.log("this.puncherMemberModal: ", this.puncherMemberModal);

        if (this.puncherMemberModal) {
          // selectedTeacherList }}{{ getDepartmentList
          console.log("this.部门: ", this.getDepartmentList);
          console.log("this.人员: ", this.selectedTeacherList);
          let str = ''
          if (this.getDepartmentList.length) {
            this.getDepartmentList.forEach(item => {
              str = str + item.nickName + '(' + item.personCount + ')'
            })
          }
          if (this.selectedTeacherList.length) {
            this.selectedTeacherList.forEach(item => {
              str = str + ' ' + item.userName
            })
          }
          console.log("str: ",str);
          this.PunchersTxt = str
          this.puncherMemberModal = false
          this.ownerMemberModal = false
        } else {
          let str = ''
          if (this.selectedTeacher2List.length) {
            this.selectedTeacher2List.forEach(item => {
              str = str + ' ' + item.userName
            })
          }
          console.log("str: ",str);
          this.OwnerTxt = str
          this.puncherMemberModal = false
          this.ownerMemberModal = false
        }
      },

      //查找所有父节点  返回id集合
      getParentIds(list, id) {
        for (let i in list) {
          if (list[i].id === id || list[i].userId === id) {
            return [];
          }
          if (list[i].children) {
            let node = this.getParentIds(list[i].children, id);
            if (node) {
              return node.concat(list[i].id);
            }
          }
        }
      },


      async getModinMemberList() {
        let r = (await allTeacherAndTree()).data
        this.handleTreeData(r.departmentTree)
        // 添加暂无部门的数据
        let tempList = r.departmentTree
        let noDepartmentTeacher = []
        r.personList.forEach(item => {
          item.title = item.name
          item.key = item.userId
          noDepartmentTeacher.push(item)
        })
        tempList.push({
          code: "",
          id: '',
          name: "无部门",
          nickName: "无部门",
          title: '暂未分配部门人员',
          key: '',
          parentId: '',
          personCount: noDepartmentTeacher.length,
          type: 1,
          children: noDepartmentTeacher
        })
        this.teacherList = tempList

        // this.handleTreeData(r.data.departmentTree);
        // this.teacherList = r.data.departmentTree;
        // if (r.message === "success") {
        //   this.handleTreeData(r.data.departmentTree);
        //   this.teacherList = r.data.departmentTree;
        // } else {
        //   this.$message.warning(r.message);
        // }
      },
      handleTreeData(data) {
        for (let i = 0; i < data.length; i++) {
          const item = data[i];
          const { id, userId, name, child, personList } = item;
          item.title = name;
          item.key = id || userId;
          item.children = child && child.length ? child : personList;
          if ((child && child.length) || (personList && personList.length)) {
            this.handleTreeData(child && child.length ? child : personList);
          }
        }
      },


      onTeacherChange(checkedValues, checkedNodes) {
        this.checkedTeacherList = checkedValues;
        let arr = [];
        checkedNodes.checkedNodesPositions.forEach((item) => {
          const { name, userId, userIndex, departmentId, child, personList } =
            item.node.data.props;
          if (!child || !personList) {
            arr.push({
              userName: name,
              userId,
              userIndex,
              departmentId,
              userType: "T",
            });
          }
        });
        this.selectedTeacherList = arr;
      },

      delCheckedEvt(userId, type) {
        if (type === "T") {
          const result = this.getParentIds(this.teacherList, userId)
             console.log("mmmm",result)
          this.selectedTeacherList = this.selectedTeacherList.filter(
            (v) => v.userId !== userId
          );
          this.checkedTeacherList = this.checkedTeacherList.filter(
            (v) => v !== userId && !result.includes(v)
          );
        } else if (type === "S") {
          const result = this.getParentIds(this.studentList, userId)
             console.log("mmmm",result)
          this.selectedStudentList = this.selectedStudentList.filter(
            (v) => v.userId !== userId
          );
          this.checkedStudentList = this.checkedStudentList.filter(
            (v) => v !== userId && !result.includes(v)
          );

        } else {
          this.selectedRoleList = this.selectedRoleList.filter(
            (v) => v.roleCode !== userId
          );
          this.checkedRoleList = this.checkedRoleList.filter((v) => v !== userId);
        }
      },
      onTeacher2Change(checkedValues, checkedNodes) {
        this.checkedTeacher2List = checkedValues;
        let arr = [];
        checkedNodes.checkedNodesPositions.forEach((item) => {
          const { name, userId, userIndex, departmentId, child, personList } =
            item.node.data.props;
          if (!child || !personList) {
            arr.push({
              userName: name,
              userId,
              userIndex,
              departmentId,
              userType: "T",
            });
          }
        });
        this.selectedTeacher2List = arr;
      },

      delCheckedEvt2(userId, type) {
        if (type === "T") {
          const result = this.getParentIds(this.teacherList, userId)
             console.log("mmmm",result)
          this.selectedTeacher2List = this.selectedTeacher2List.filter(
            (v) => v.userId !== userId
          );
          this.checkedTeacher2List = this.checkedTeacher2List.filter(
            (v) => v !== userId && !result.includes(v)
          );
        } else if (type === "S") {
          const result = this.getParentIds(this.studentList, userId)
             console.log("mmmm",result)
          this.selectedStudentList = this.selectedStudentList.filter(
            (v) => v.userId !== userId
          );
          this.checkedStudentList = this.checkedStudentList.filter(
            (v) => v !== userId && !result.includes(v)
          );

        } else {
          this.selectedRoleList = this.selectedRoleList.filter(
            (v) => v.roleCode !== userId
          );
          this.checkedRoleList = this.checkedRoleList.filter((v) => v !== userId);
        }
      },










      // 周一到周五排版，周六周末休息，若无值自动设置默认班次
      getShiftList () {
        this.shiftData = []
        console.log("this.shiftResthis.shiftRes 依赖变化: ", this.shiftRes)
        this.shiftData.push({
          day: '周一',
          num: 1,
          shiftDay: this.shiftRes.shiftDay1 || this.shiftRes.defaultShiftId,
          shiftDayStr: this.shiftRes.shiftDay1Str || this.shiftRes.defaultShiftStr,
        })
        this.shiftData.push({
          day: '周二',
          num: 2,
          shiftDay: this.shiftRes.shiftDay2 || this.shiftRes.defaultShiftId,
          shiftDayStr: this.shiftRes.shiftDay2Str || this.shiftRes.defaultShiftStr,
        })
        this.shiftData.push({
          day: '周三',
          num: 3,
          shiftDay: this.shiftRes.shiftDay3 || this.shiftRes.defaultShiftId,
          shiftDayStr: this.shiftRes.shiftDay3Str || this.shiftRes.defaultShiftStr,
        })
        this.shiftData.push({
          day: '周四',
          num: 4,
          shiftDay: this.shiftRes.shiftDay4 || this.shiftRes.defaultShiftId,
          shiftDayStr: this.shiftRes.shiftDay4Str || this.shiftRes.defaultShiftStr,
        })
        this.shiftData.push({
          day: '周五',
          num: 5,
          shiftDay: this.shiftRes.shiftDay5 || this.shiftRes.defaultShiftId,
          shiftDayStr: this.shiftRes.shiftDay5Str || this.shiftRes.defaultShiftStr,
        })
        return this.shiftData
      },

      renderShiftData (pageInit = true) {
        this.shiftData = []
        this.shiftData.push({
          day: '周一',
          num: 1,
          shiftDay: this.shiftRes.shiftDay1 || this.shiftRes.defaultShiftId,
          shiftDayStr: this.shiftRes.shiftDay1Str || this.shiftRes.defaultShiftStr,
        })
        this.shiftData.push({
          day: '周二',
          num: 2,
          shiftDay: this.shiftRes.shiftDay2 || this.shiftRes.defaultShiftId,
          shiftDayStr: this.shiftRes.shiftDay2Str || this.shiftRes.defaultShiftStr,
        })
        this.shiftData.push({
          day: '周三',
          num: 3,
          shiftDay: this.shiftRes.shiftDay3 || this.shiftRes.defaultShiftId,
          shiftDayStr: this.shiftRes.shiftDay3Str || this.shiftRes.defaultShiftStr,
        })
        this.shiftData.push({
          day: '周四',
          num: 4,
          shiftDay: this.shiftRes.shiftDay4 || this.shiftRes.defaultShiftId,
          shiftDayStr: this.shiftRes.shiftDay4Str || this.shiftRes.defaultShiftStr,
        })
        this.shiftData.push({
          day: '周五',
          num: 5,
          shiftDay: this.shiftRes.shiftDay5 || this.shiftRes.defaultShiftId,
          shiftDayStr: this.shiftRes.shiftDay5Str || this.shiftRes.defaultShiftStr,
        })

        if (pageInit) {
          // 周六周日设置为系统休息班次
          let theOne = this.attshiftData.find(item => {
            return item.defaultType == 2
          }) || {}
          this.shiftData.push({
            day: '周六',
            num: 6,
            shiftDay: theOne.id || this.shiftRes.defaultShiftId,
            shiftDayStr: (theOne.shiftName + ' ' + theOne.workTimeStr) || this.shiftRes.defaultShiftStr,
          })
          this.shiftData.push({
            day: '周日',
            num: 7,
            shiftDay: theOne.id || this.shiftRes.defaultShiftId,
            shiftDayStr: (theOne.shiftName + ' ' + theOne.workTimeStr) || this.shiftRes.defaultShiftStr,
          })
        } else {
          this.shiftData.push({
            day: '周六',
            num: 6,
            shiftDay: this.shiftRes.shiftDay6 || this.shiftRes.defaultShiftId,
            shiftDayStr: this.shiftRes.shiftDay6Str || this.shiftRes.defaultShiftStr,
          })
          this.shiftData.push({
            day: '周日',
            num: 7,
            shiftDay: this.shiftRes.shiftDay7 || this.shiftRes.defaultShiftId,
            shiftDayStr: this.shiftRes.shiftDay7Str || this.shiftRes.defaultShiftStr,
          })
        }
      },

      getBaseInfo() {
        // 获取考勤组基础信息和人员信息
        getBase(this.punchGroupInfo.id)
        .then(response => {
          this.punchGroupInfo = response.data

          let deptParams = []
          response.data.deptParams.forEach(item => {
            deptParams.push(item.userId)
          })
          this.treeSelect = deptParams



          let memberParams = []
          response.data.memberParams.forEach(item => {
            memberParams.push(item.userId)
          })
          this.checkedTeacherList = memberParams

          let leaderParams = []
          response.data.leaderParams.forEach(item => {
            leaderParams.push(item.userId)
          })
          this.checkedTeacher2List = leaderParams




          // setTimeout(() => {
          //   this.checkedTeacherList = [ "", 1172, 1173, 1174, 1239, 1240, 1250, 1261, 1263, 1264, 1265, 1266, 1268, 1346, 1347, 1389, 1398, 1407, 1894, 1895, 1896, 1905, 1922, 1927, 1940, 1941, 1950, 1951, 1952, 1953, 1955, 1956, 1957, 1958, 1984, 1985, 1989, 1990, 1991, 1992, 1994, 1996, 1997, 2007, 2009, 2010, 2013, 2019, 2021, 2032, 2116, 2118, 2128, 2202, 2207, 2208, 2210, 83, 85, 88, 90, 97, 95, 100, 101, 106, 107, 109, 111 ]

          //   this.treeSelect = [ "0-0", 83, 85, 88, 90, 97, 95, 100, 101 ]

          //   this.checkedTeacher2List = [ 83, 85, 1172, 1896, 1957, 1239, 1407, 1173, 1894, 1895, 1240, 88, 90, 97, 95, 100, 101, 106, 107, 109, 111 ]
          // }, 2000)

          let str = ''

          if (this.punchGroupInfo.deptParams.length) {
            this.punchGroupInfo.deptParams.forEach(item => {
              str = str + item.deptName
            })
          }
          if (this.punchGroupInfo.memberParams.length) {
            this.punchGroupInfo.memberParams.forEach(item => {
              str = str + ' ' + item.userName
            })
          }
          this.PunchersTxt = str
          let str2 = ''
          if (this.punchGroupInfo.leaderParams.length) {
            this.punchGroupInfo.leaderParams.forEach(item => {
              str2 = str2 + ' ' + item.userName
            })
          }
          this.OwnerTxt = str2



          // // 回显对象
          // this.punchGroupInfo.memberParams.forEach(item => {
          //   item.obj = {
          //     userId: item.userId,
          //     userIndex: item.userIndex,
          //     userName: item.userName,
          //     // deptName: item.deptName,
          //     // deptId: item.deptId,
          //   }
          //   this.checkedPuncher.push(JSON.stringify(item.obj))
          // })
          // // 回显负责人
          // this.punchGroupInfo.leaderParams.forEach(item => {
          //   item.obj = {
          //     userId: item.userId,
          //     userIndex: item.userIndex,
          //     userName: item.userName,
          //   }
          //   this.checkedOwner.push(JSON.stringify(item.obj))
          // })






        })

        // 选择班次
        attshiftList(this.punchGroupInfo.id)
        .then(response => {
          this.attshiftData = response.data
          // 获取班次
          shift(this.punchGroupInfo.id)
          .then(response => {
            if (response.success) this.shiftRes = response.data
            this.renderShiftData(true)
          })
        })

        type(this.punchGroupInfo.id)
        .then(response => {
          this.typeData = response.data
          console.log('this.typeData', this.typeData);
        })

        rule(this.punchGroupInfo.id)
        .then(response => {
          this.ruleData = response.data
          console.log('this.typeData', this.ruleData);
        })

        //校历
        calendarInfo()
        .then(response => {
          let list = response.data.list
          list.forEach(item => {
            item.calendarAndEventVos.forEach(item1 => {
              item1.calendarVos.forEach(item2 => {
              })
            })
          })
        })
      },
      // 获取树数据
      getMemberTreeData () {
        tree({ parentId: 0}).then(response => {
          this.departemntList = response.data.list
          // allTeacherAndTreeP
          allTeacherAndTreeP().then(response => {
            this.allTeacherList = response.data.departmentTree
            console.log("this.allTeacherListthis.allTeacherList: ", this.allTeacherList);
          })
        })
      },
      // 删除
      removedTaglog(userId) {
        this.punchGroupInfo.memberParams.forEach((item, index) => {
          console.log('item', item);
          if (item.userId == userId) {
            this.allSelect.splice(index, 1)
          }
        })
      },

      // step--1
      showMemberModal (type) {
        let tempArr = this.allTeacherList
        this.allTeacherList = []
        this.allTeacherList = tempArr
        if (type == 1) {
          this.puncherMemberModal = true
          this.ownerMemberModal = false
        }
        if (type == 2) {
          this.puncherMemberModal = false
          this.ownerMemberModal = true
        }
      },
      closeMemberModal () {
        this.puncherMemberModal = false
        this.ownerMemberModal = false
      },
      // step-2
      onekeySetting() {
        if (!this.selectedshiftKeys.length) return this.$message.error('请勾选批量操作的班次')

        this.visibleTwo = true
        attshiftList(this.punchGroupInfo.id)
        .then(response => {
          this.attshiftData = response.data
        })
      },
      onRadioShiftSelect (e) {
        this.radioShiftRowData = e
      },
      // 更改班次
      updateShiftDataById(record) {
        this.commonRecordData = record
        this.visibleTwo = true
        attshiftList(this.punchGroupInfo.id)
        .then(response => {
          this.attshiftData = response.data
        })
      },

      updateShiftData() {
        // 更新具体行
        if (this.commonRecordData) {
          eval("this.shiftRes.shiftDay"+(this.commonRecordData.num)+" = this.radioShiftRowData.id")
          eval("this.shiftRes.shiftDay"+(this.commonRecordData.num)+"Str = this.radioShiftRowData.shiftName + ' ' + this.radioShiftRowData.workTimeStr")
          this.commonRecordData = null
          console.log("this.shiftResthis.shiftRes232: ", this.shiftRes);
        } else {
          if (!this.selectedshiftKeys.length) return this.$message.error('请勾选批量操作的班次')
          if (!this.radioShiftRowData.id) return this.$message.error('请选择班次')
          // 更新所有勾选班次
          for (let i = 0; i <= 6; i++) {
            if (this.selectedshiftKeys.includes(i)) {
              eval("this.shiftRes.shiftDay"+(i+1)+" = this.radioShiftRowData.id")
              eval("this.shiftRes.shiftDay"+(i+1)+"Str = this.radioShiftRowData.shiftName +' '+ this.radioShiftRowData.workTimeStr")
            }
          }
        }
        this.visibleTwo = false
        this.renderShiftData(false)
      },
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
        console.log("this.selectedRowKeys: ", this.selectedRowKeys);
      },
      onshiftChange(key) {
        console.log('onshiftChange', key);
        this.selectedshiftKeys = key
      },
      //更改班次
      showModal(e) {
        console.log('hide', e);
        this.editData = e
        this.timeData = []
        this.addModal = true
        this.componentsName = '编辑班次'
        if (e.shiftDayStr) {
          this.timeData.push({
            shiftName: e.shiftDayStr.split('次：')[0] + '次',
            shiftTime: e.shiftDayStr.split('次：')[1]
          })
        }
        this.visibleTwo = true;
      },

      handleChargeOk(e) {
        this.charge = false
        console.log('handleChargeOk', e);
      },
      onRadioAddressSelect (e) {
        this.radioAddressRowData = e
      },
      addClasses() {
        this.editData = {}
        this.addModal = true
        this.componentsName = '添加班次'
      },
      // 删除考勤地
      addressRemove(id) {
        this.$confirm({
          title: '是否删除该考勤地',
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            attgroupgpsplaceRemove({
                id
              })
              .then(response => {
                if (response.success) {
                  this.$message.success('删除考勤地成功');
                  this.getBaseInfo()
                }
              })
              .catch(() => {})
          }
        })
      },

      confirm(id) {
        console.log("id: ",id);
        this.$confirm({
          title: '是否删除该班次',
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            attshiftRemove({id})
            .then(response => {
              if (response.success) {
                this.$message.success('班次删除成功');
                this.onekeySetting()
              }
            })
            .catch(() => {
            })
          }
        })
      },
      moment,
      seeCalendar() {
        this.calendar = true
      },

      currentBtn(e) {
        if (e == 1) {
          this.current = e == 1 ? this.current - 1 : this.current + 1
        }
        // 下一步即标识添加 或者 保存功能
        if (e == 2 || !e) {
          if (this.current == 0) {
            // this.punchGroupInfo.leaderParams = []
            // this.punchGroupInfo.memberParams = []
            console.log("this.getDepartmentList: ",this.getDepartmentList);
            console.log("this.selectedTeacherList: ",this.selectedTeacherList);
            console.log("this.selectedTeacher2List: ",this.selectedTeacher2List);
            // if (!this.selectedTeacherList.length || !this.selectedTeacher2List.length || !this.punchGroupInfo.groupName) {
            // 部门
            this.getDepartmentList.forEach(item => {
              this.punchGroupInfo.deptParams.push({
                deptId: item.id,
                deptName: item.nickName
              })
            })
            // 老师
            this.selectedTeacherList.forEach(item => {
              this.punchGroupInfo.memberParams.push({
                deptId: item.departmentId,
                deptName: '',
                userId: item.userId,
                userIndex: item.userIndex,
                userName: item.userName,
              })
            })
            // 负责人
            this.selectedTeacher2List.forEach(item => {
              this.punchGroupInfo.leaderParams.push({
                userId: item.userId,
                userIndex: item.userIndex,
                userName: item.userName,
              })
            })
            // this.punchGroupInfo.leaderParams = []
            // this.punchGroupInfo.memberParams = []
            if (!this.punchGroupInfo.memberParams.length || !this.punchGroupInfo.groupName) {
              return this.$message.error('考勤组名称不能为空，考勤对象，考勤负责人不能为空');
            }
            save(this.punchGroupInfo)
            .then(response => {
              if (response.success) {
                this.punchGroupInfo.id = this.groupId = this.dataId = response.data
                this.$message.success('保存成功')
                if (e) this.current = this.current + 1
                this.getBaseInfo()
              }
            })
          } else if (this.current == 1) {
            this.shiftRes.id = this.punchGroupInfo.id
            console.log("this.shiftResthis.shiftRes: ", this.shiftRes)
            shiftSave(this.shiftRes)
            .then(response => {
              if (response.success) {
                this.$message.success('保存成功');
                if (e) this.current = this.current + 1
                // 获取考勤地点
              }
            })
          } else if (this.current == 2) {
            if (!this.radioAddressRowData.id) return this.$message.error('请选择考勤地点')
            this.typeData.id = this.punchGroupInfo.id
            this.typeData.gpsPlaceId = this.radioAddressRowData.id
            typeSave(this.typeData)
              .then(response => {
                if (response.success) {
                  this.$message.success('保存考勤地成功');
                  if (e) this.current = this.current + 1
                }
              })
              .catch(() => {})
          } else {
            this.ruleData.id = this.dataId
            ruleSave(this.ruleData)
              .then(response => {
                if (response.success) {
                  this.$message.success('最后一步提交成功');
                  setTimeout(() => {
                    this.$router.replace('/survey/index')
                  }, 1000)
                }
              })
              .catch(() => {})
          }
        }
      },
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
        });
      },
      handleSelectChange(value) {
        console.log(value);
        this.form.setFieldsValue({
          note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
        });
      },
      switchShiftDefault(e) {
        this.attshiftParams.shiftDefault = e ? 1 : 0
        console.log('e.target.checked', this.attshiftParams.shiftDefault);
      },
      onExpand(expandedKeys) {
        console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onSelect(selectedKeys, info) {
        console.log('onSelect', info);
        this.selectedKeys = selectedKeys;
      },
      keyForm() {
        this.keyDialog = true
      },
      memberListChange(memberList) {
        this.memberList = memberList;
      },
      leaderListChange(leaderList) {
        this.leaderList = leaderList;
      },

      shiftResChange(e) {
        console.log('shiftResChange', e.target.value);
        console.log('shiftResChange', this.shiftRes.groupArrange);
      },
      typeChange(e) {
        console.log("typeChange: ",e);
        // this.typeData.punchType = e.target.value
        this.typeData.punchType = 0
        this.showGps = e.target.value == 0 ? true : false
      },
      workStartOneChange(time, timeString) {
        this.workOneParams.workStart = timeString
        this.oneTime(this.workOneParams.workStart, this.workOneParams.workEnd, undefined, undefined)
      },
      workEndOneChange(time, timeString) {
        this.workOneParams.workEnd = timeString
        this.oneTime(this.workOneParams.workStart, this.workOneParams.workEnd, undefined, undefined)
      },
      oneTime(workStart, workEnd, restStart, restEnd) {
        try{
          let cdate = new Date()
          let cday = cdate.getFullYear() +'-'+ (cdate.getMonth() + 1) +'-'+ cdate.getDate()
          if (workStart) workStart = cday + ' ' + workStart
          if (workEnd) workEnd = cday + ' ' + workEnd
          if (restStart) restStart = cday + ' ' + restStart
          if (restEnd) restEnd = cday + ' ' + restEnd
          if (workStart && workEnd) {
            let mss
            // 有休息时间
            if (restStart && restEnd) {
              mss = new Date(workEnd).valueOf() - new Date(workStart).valueOf() - (new Date(restEnd).valueOf() - new Date(restStart).valueOf())
            } else {
              mss = new Date(workEnd).valueOf() - new Date(workStart).valueOf()
            }
            if (mss < 0) {
              return this.$message.error('计算时长出现负数，请合理选择工作时间！');
            }
            this.workHours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            this.workMinute = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
          }
        }catch(e){
          console.log("又报错: ", e);
        }


      },
      workStartTwoChange(time, timeString) {
        this.workTwoParams.workStart = timeString
        // this.oneTime(this.workTwoParams.workStart, this.workTwoParams.workEnd, undefined, undefined)
      },
      workEndTwoChange(time, timeString) {
        this.workTwoParams.workEnd = timeString
        // this.oneTime(this.workTwoParams.workStart, this.workTwoParams.workEnd, undefined, undefined)
      },
      workStartThrChange(time, timeString) {
        this.workThrParams.workStart = timeString
        // this.oneTime(this.workThrParams.workStart, this.workThrParams.workEnd, undefined, undefined)
      },
      workEndThrChange(time, timeString) {
        this.workThrParams.workEnd = timeString
        // this.oneTime(this.workThrParams.workStart, this.workThrParams.workEnd, undefined, undefined)
      },
      restStartChange(time, timeString) {
        this.attshiftParams.restStart = timeString
        this.oneTime(this.workOneParams.workStart, this.workOneParams.workEnd, this.attshiftParams.restStart, this
          .attshiftParams.restEnd)
      },
      restEndChange(time, timeString) {
        this.attshiftParams.restEnd = timeString
        this.oneTime(this.workOneParams.workStart, this.workOneParams.workEnd, this.attshiftParams.restStart, this
          .attshiftParams.restEnd)
      },
      handleaddModalOk() {
        this.$refs.punchEditModule.handleaddModalOk()
        this.addModal = false
        setTimeout(() => {
          this.onekeySetting()
        },1200)
      },

      departmentSelect(e) {

        console.log("e: ",e);

        let departmentArr = []
        this.treeList.forEach(item => {
          e.forEach(item1 => {
            if (item1 == item.userId) treeList.push(item)
          })
        })
        this.departmentArr = departmentArr
        console.log("this.departmentArr: ", this.departmentArr)
      },

      punchMemberSelect(e) {
        if (this.puncherMemberModal) {
          let puncherArr = []
          this.allTeacherList.forEach(item => {
            e.forEach(item1 => {
              if (item1 == item.userId) puncherArr.push(item)
            })
          })
          this.puncherArr = puncherArr
          console.log("this.puncherArr: ", this.puncherArr)
        } else {
          let ownerArr = []
          this.allTeacherList.forEach(item => {
            e.forEach(item1 => {
              if (item1 == item.userId) ownerArr.push(item)
            })
          })
          this.ownerArr = ownerArr
          console.log("this.ownerArr: ", this.ownerArr)
        }
      },

      addressSelect(value, option) {
        console.log("addressSelect: ", value);
        console.log("option: ", option);
        let findOne = this.poiList.find(item => {
          return item.name == option.key
        })
        console.log('findOne', findOne);
        this.$refs.mapContainer.addressCircle(radius.target.value)
      },

      mapSelect(e) {
        let [placeLongitude, placeLatitude] = (this.poiTempArr.find(item => {
          return item.name == e
        }).location).split(',')
        this.attgroupgpsplaceParams.groupId = this.punchGroupInfo.id
        this.attgroupgpsplaceParams.placeAddr = e
        this.attgroupgpsplaceParams.placeLatitude = placeLatitude
        this.attgroupgpsplaceParams.placeLongitude = placeLongitude
        this.attgroupgpsplaceParams.placeName = e
        console.log("this.attgroupgpsplaceParams: ", this.attgroupgpsplaceParams);
      },
      // 保存或更新办公地点
      saveOrUpdateAddress() {
        if (!this.attgroupgpsplaceParams.groupId || !this.attgroupgpsplaceParams.placeAddr || !this
          .attgroupgpsplaceParams.placeLatitude || !this.attgroupgpsplaceParams.placeLongitude || !this
          .attgroupgpsplaceParams.placeName || !this.attgroupgpsplaceParams.validRange) {
          return this.$message.error('考勤地点参数不能为空，请检查');
        }
        if (this.attgroupgpsplaceParams.id) {
          attgroupgpsplaceEdit(this.attgroupgpsplaceParams)
          .then(response => {
            if (response.success) {
              this.$message.success('考勤地点编辑成功')
              this.showGPS = false
              this.getBaseInfo()
            }
          })
        } else {
          attgroupgpsplaceSave(this.attgroupgpsplaceParams)
          .then(response => {
            if (response.success) {
              this.$message.success('考勤地点添加成功')
              this.showGPS = false
              this.getBaseInfo()
            }
          })
        }
      },

      addAddress() {
        this.showGPS = true
        this.attgroupgpsplaceParams.groupId = this.punchGroupInfo.id
      },

      // 编辑考勤地点
      editAddress(record) {
        this.showGPS = true
        this.attgroupgpsplaceParams = record
      },

      mapSearch(e) {
        this.poisList = []
        getGPS({
          'key': 'd69850d87e6570d419cef61fa7674bc9',
          'city': '杭州',
          'keywords': e
        })
        .then(response => {
          this.poiTempArr = this.poisList = []
          this.poiTempArr = response.pois
          response.pois.forEach(item => {
            this.poisList.push(item.name)
          })
        })
      },
    }
  }
</script>
<style scoped="scoped" lang="scss">
  .flow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 47px 228px 27px 228px;

    .flow-for {
      display: flex;
      align-items: center;

      .flow-tit {
        color: #333333;
        font-size: 16px;
      }

      .line {
        height: 1px;
        width: 200px;
        margin: 0 20px;
        background: #E5E5E5;
      }
    }
  }

  .flow-form {
    text-align: center;
    margin-top: 20px;
    ::v-deep .ant-form-item-children {
      display: flex;
    }

    .form-btn {
      margin: 0 10px;
    }

    .flow-form-all {
      margin: 24px 0;

      .flow-form-tit {
        display: flex;
        align-items: center;
        color: rgba(0, 0, 0, 0.85);
        width: 100px;
        justify-content: end;
      }

      .flow-form-desc {
        height: 32px;
        width: 100%;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;

        .ellipsis {
          display: flex;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }

    .btn-left {
      width: 50%;
      border-right: 1px solid #F2F4FA;

      .btn-tit {
        font-size: 14px;
      }

      .tag-btn {
        display: flex;
        align-items: center;
      }

      .clear {
        color: #4174FD;
      }

      .btn-left-input {
        margin-top: 20px;
      }

      .btn-search {
        margin: 20px 0 20px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    ::v-deep .ant-modal-body {
      padding: 0;
    }
  }

  .add-form {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .add-from-name {
      display: flex;
      align-items: center;

      .add-form-tit {
        width: 90px;
        text-align: right;
        white-space: nowrap;
      }

      .add-from-input {
        width: 570px;
      }
    }
  }

  .add-form-other {
    display: flex;
    align-items: center;
    margin-top: 24px;

    .add-form-tit {
      width: 90px;
      text-align: right;
      white-space: nowrap;
    }

    .time-tit {
      font-size: 14px;
      font-weight: 600;
      color: #333333;
      margin-top: 8px;
    }
  }

  .add-from-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 660px;

    .add-from-time {
      display: flex;
      align-items: center;
      margin-top: 24px;

      .add-from-time-input {
        width: 120px;
        margin: 0 5px;
      }
    }
  }

  .add-line {
    height: 1px;
    background: #E5E5E5;
    margin-left: 90px;
    margin-top: 32px;
  }

  .form-type {
    margin-left: 30%;
    width: 1000px;

    .work-type {
      display: flex;

      .work-type-tit {
        color: #333333;
        font-size: 14px;
      }

      .work-type-locale {
        color: #4174FD;
        cursor: pointer;
      }

      .work-type-gps {
        display: flex;
        align-items: center;
      }
    }
  }

  .gps-input {
    display: flex;
    align-items: center;
    // margin-bottom: 24px;

    .gps-tit {
      width: 100px;
      text-align: right;
    }
  }

  .gps-desc {
    margin-top: -24px;
    margin-left: 100px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
  }

  .flow-rule {
    display: flex;
    align-items: center;
    white-space: nowrap;

    .rule-tit {
      font-size: 14px;
      color: #333333;
      width: 120px;
      // text-align: right;
    }

    .rule-input {
      width: 100px;
      margin: 0 5px;
    }

    .rule-switch {
      margin: 0 5px;
    }

    .rule-desc {
      font-size: 14px;
      color: #999999;
    }

  }

  .rule-form {
    display: flex;
    align-items: center;

    .rule-form-tit {
      white-space: nowrap;
    }

    .rule-select {
      width: 620px;
    }
  }



.checked-area {
  margin: 12px 0;
  .item {
    display: inline-flex;
    align-items: center;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background: #f2f4f5;
    margin: 6px 12px;
    margin-left: 0;
    border-radius: 4px;
    padding: 0 12px;
    user-select: none;
    color: #999;
    &:hover {
      color: #666;
      background: #e5e5e5;
    }

    .label {
      display: inline-block;
      max-width: 120px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: #333;
      font-size: 14px;
      font-weight: 400;
      margin-right: 8px;
    }
    .icon {
      cursor: pointer;
    }
  }
}


</style>
